<template>
  <div id="sharedPartner_bonus">
    <c-title text="分红份数明细"></c-title>
    <div class="bonusBox">
      <div class="list" v-for="(item, index) in listData" :key="index">
        <div class="top">
          <div class="name">{{ item.type_name }}</div>
          <div class="bonus">{{ item.nums }}</div>
        </div>
        <div class="bottom">
          <div class="time">{{ item.updated_at }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      listData: [],
      page: 1,
      total_page: 0,
      isLoadMore: true
    };
  },
  activated() {
    this.init();
    this.getData();
  },
  methods: {
    init() {
      this.listData = [];
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
    },
    getData() {
      $http.post("plugin.share-partner.frontend.dividend.get-bonus-list", { page: this.page }).then(({ result, data, msg }) => {
        this.isLoadMore = true;
        this.loading = false;
        if (result == 1) {
          this.isLoadMore = true;
          this.total_page = data.last_page || 0;
          this.listData = data.data;
        } else Toast(msg);
      });
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return false;
      } else {
        let page = this.page + 1;
        $http.get("plugin.share-partner.frontend.dividend.get-bonus-list", { page: page }).then(({ result, data, msg }) => {
          this.isLoadMore = true;
          this.loading = false;
          if (result === 1) {
            this.page = page;
            let myData = data.data;
            this.listData = this.listData.concat(myData); //数组拼接
          } else {
            Toast(msg);
            this.isLoadMore = false;
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.bonusBox {
  margin: 0.75rem;
  padding-bottom: 1rem;
}

.list {
  padding: 0.75rem 0.75rem;
  background: #fff;
  border-radius: 0.4688rem;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.325rem;

    .bonus {
      color: #f15353;
    }
  }

  .bottom {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #b4b4b4;
    font-size: 0.4375rem;
  }
}
</style>